<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作父级元素</title>
</head>
<body>
    <table border="1" cellspacing="0px" cellpadding="0px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王芳</td>
                <td>12</td>
                <td>女</td>
                <td>6年级2班</td>
            </tr>
            <tr>
                <td>马壮</td>
                <td>12</td>
                <td>男</td>
                <td>6年级2班</td>
            </tr>
            <tr>
                <td>tom</td>
                <td>13</td>
                <td>男</td>
                <td>7年级3班</td>
            </tr>
        </tbody>
    </table>
    <script>
        /*
        parentNode：返回指定节点的父节点 父节点可以是任意类型的节点如元素节点
        和文本节点
        parentElement：返回指定节点的元素 父元素是指节点的父节点中的第一个元素
        */
       //获得tr元素
       var trs = document.getElementsByTagName('tr')
       //获得thead
       var head = trs[0].parentNode;
       console.log(head);
       //获得tbody
       var tbody =trs[1].parentNode;
       console.log(tbody);
       //获得第一行父级元素
        var theadable =trs[0].parentElement
       console.log(theadable);
       //获得第二行父级元素
       var tbodyele=trs[1].parentElement
        console.log(tbodyele);
        //给thead设置绿色背景色
        head.style.backgroundColor='green'
        //给tbody设置粉色背景色
        tbodyele.style.backgroundColor='pink'
       //获得thead的子节点数组
     var headnodes= head.childNodes;
     console.log(headnodes);
     
     //获得tbodyele的子元素
     var tbodychild=tbodyele.children;
     console.log(tbodychild);
     //获得tbodyele的子节点
      var tbodychildNodes=tbodyele.childNodes
      //获得tbodyele的子元素第一行的子元素
    var trs=tbodychild[0].children;
    console.log(trs);
    //获得王芳的性别
     var gender = trs[2].innerText
     console.log(gender);
     
    //获得tbodyele第一个子节点
var ftbodyele = tbodyele.firstChild
console.log(ftbodyele);

    //获得tbodyele第一个子元素
     var ftbodyele1 = tbodyele.firstElementChild
       console.log(ftbodyele1);
       //获得tbodyele最后一个子节点
        var ltbodyele = tbodyele.lastChild
        console.log(ltbodyele);
       //获得tbody最后一个子元素
       var ltbodyele1 = tbodyele.lastElementChild
       console.log(ltbodyele1);
       //获得马壮相邻的后一个子元素
       console.log(tbodyele.children[1].firstElementChild.nextElementSibling);
       //获得7年级3班相邻的前一个子元素
       console.log(tbodyele.children[2].lastElementChild.previousElementSibling);
       
    </script>
</body>
</html>